<template>
  <div>
    <h2>我是父组件</h2>
    <!-- <SonComponent
      v-for="item in message"
      :key="item.id"
      :message="item"
    ></SonComponent> -->

    <SonComponent></SonComponent>
    <!-- 这样写法太麻烦了 -->
    <!-- <SonComponent
      :messageId="message[0].id"
      :messageUname="message[0].uname"
      :messageFamliyName="message[0].famliyName"
      :messageAge="message[0].age"
      :messageProfess="message[0].profess"
    ></SonComponent>
    <SonComponent
      :messageId="message[1].id"
      :messageUname="message[1].uname"
      :messageFamliyName="message[1].famliyName"
      :messageAge="message[1].age"
      :messageProfess="message[1].profess"
    ></SonComponent>
    <SonComponent
      :messageId="message[2].id"
      :messageUname="message[2].uname"
      :messageFamliyName="message[2].famliyName"
      :messageAge="message[2].age"
      :messageProfess="message[2].profess"
    ></SonComponent>
    <SonComponent
      :messageId="message[3].id"
      :messageUname="message[3].uname"
      :messageFamliyName="message[3].famliyName"
      :messageAge="message[3].age"
      :messageProfess="message[3].profess"
    ></SonComponent> -->


<!-- 第3步 @sayPrice="fatherSayPrice"-->
    <SonComponent
      v-for="item in message"
      :key="item.id"
      :messageId="item.id"
      :messageUname="item.uname"
      :messageFamliyName="item.famliyName"
      :messageAge="item.age"
      :messageProfess="item.profess"
      @sayPrice="fatherSayPrice"
    ></SonComponent>
  </div>
</template>
 
<script>
import SonComponent from './SonComponent.vue'

export default {
  // name: 'FatherComponent',

  components: {
    SonComponent
  },

  data() {
    return {
      message: [
        {
          id: '1',
          uname: 'harry',
          famliyName: 'despot',
          age: 28,
          profess: '前端'
        },
        {
          id: '2',
          uname: '志豪',
          famliyName: '陈',
          age: 17,
          profess: '测试'
        },
        {
          id: '3',
          uname: '嘉',
          famliyName: '高',
          age: 21,
          profess: '全栈'
        },
        {
          id: '4',
          uname: '涵翔',
          famliyName: '侯',
          age: 18,
          profess: '帕勒马斯'
        }
      ]
    }
  },

  methods: {
    // 第4步
    fatherSayPrice(id, num) { 
      console.log('我是父组件里的事件');
      console.log(num);
      this.message.forEach(item => { 
        if (item.id === id) {
          item.age += num
        }
     
      })
      
      
    }
  }
}
</script>

<style scoped>
</style>